<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>图片上传</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }
</style>

<body>
  <div class="layout">
    <form id="actPostInfos" enctype="multipart/form-data" name="actPostInfos">
      <div class="lay-content">
        <div class="lay_img_count">
          <div class="l_img_logo">
            <!-- 默认加载的图片 -->
            <img id="previewImg" class="banner-img" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1912053827,3876120718&fm=27&gp=0.jpg"
              alt="默认图片" width="300" height="350" />

          </div>
          <input name="logo" id="albumFile" type="file" hidden="hidden" accept="image/*" />
        </div>
        <div class="lay_img_counts clearfloat">
          <span style="color:red">图片大小不能超过5M , 支持png , jpg等格式</span>
          <!-- <span class="lay-visiblity">点击按钮上传图片:</span> -->
          <button id="chooseBannerImgBtn" style="width:60px;height:30px;background-color:orange;outline:none;border:none;
            color:#fff;cursor: pointer;">上传logo</button>

        </div>
        <div>
          姓名：
          <input type="text" id="name" placeholder="请输入你喜欢的明星名字"> 爱好：
          <input type="text" id="hobby" placeholder="请输入明星的爱好"> 地址：
          <input type="text" id="address" placeholder="请输入明星的地址"> 你最爱听的歌:
          <input type="text" id="livesong" placeholder="你最喜欢明星的那些歌曲"> 详细信息:
          <input type="text" id="detailed" placeholder="请输入详细信息">
        </div>
        <div class="lay_club_profile" style="min-height:200px;margin-top:10px;position:relative">

        </div>
        <div class="lay_club_bottom" style="width:50px;height:30px;background-color:pink;">
          <button id="saveClubForm" style="width:100%;height:100%;background-color:pink;">保存</button>
        </div>
      </div>
    </form>
  </div>
</body>

</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
<script>
  /**
  * 需求：进入页面时如果页面数据为空时 可以上传图片 文字到后台
  * 页面有数据时 如果修改（不修改）图片时传给后台一个标志
  */
  $(function () {

    // 初始页面时把后台图片保存
    var clubLogoUrls = '';
    // 检测上传图片的大小
    $("#albumFile").change(function () {

      var albumFile = document.getElementById("albumFile").value.toLowerCase().split('.'); //以“.”分隔上传文件字符串

      var $file = $(this);
      if (document.actPostInfos.albumFile.value == "") {
        alert('图片不能为空！'
        );
        $("#albumFile").val("");
        // 从新设置默认图片
        $("#previewImg").attr("src", "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1912053827,3876120718&fm=27&gp=0.jpg")
        return false;
      } else {
        var albumFileType = albumFile[albumFile.length - 1];
        // 判断图片格式
        if (albumFileType == 'gif' || albumFileType == 'jpg' || albumFileType == 'bmp' ||
          albumFileType == 'png' || albumFileType == 'jpeg') {
          var albumFileSize = document.getElementById("albumFile").files[0].size;
          // 大于1M
          if (albumFileSize > 1024 * 1024 * 5) { // 1024*1024*1
            alert('图片不能大于1M, 请重新选择 !');
            $("#albumFile").val("");
            // 如果图片大于设定尺寸 请重新☑️
            $("#previewImg").attr("src", "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1912053827,3876120718&fm=27&gp=0.jpg")
            return false;
          } else {
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#previewImg");

            if (fileObj && fileObj.files && fileObj.files[0]) {
              dataURL = windowURL.createObjectURL(fileObj.files[0]);
              $img.attr('src', dataURL);
            } else {
              dataURL = $file.val();
              var imgObj = document.getElementById("previewImg");
              // 两个坑:
              // 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
              // 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
              imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
              imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
            }
          }
          return true;
        } else {
          //jpg和jpeg格式是一样的只是系统Windows认jpg，Mac OS认jpeg，二者区别自行百度
          alert('请选择格式为*.jpg、*.gif、*.bmp、*.png、*.jpeg 的图片')
          $("#albumFile").val("");
          $("#previewImg").attr("src", "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1912053827,3876120718&fm=27&gp=0.jpg")
          return false;
        }
      }
    });


    // 选择上传图片
    $("#chooseBannerImgBtn").click(function (e) {
      e.preventDefault(); // *注意这里不能触发change事件 只有click事件
      $("#albumFile").trigger("click"); // 触发到文件选择
    });

    // 提交按钮操作
    $("#saveClubForm").click(function (e) {
      e.preventDefault();
      var albumFile = document.getElementById("albumFile").value.toLowerCase().split('.'); //以“.”分隔上传文件字符串

      /**
      * 在这里我们src路径与别人不同 eg: http://lurenhong.top/love?fileName=enjf2jcns.jpg
      * 通过在图片src中查找 fileName 如果找不到就提示上传图片不能为空
      */

      // 在这里默认图片的一段字符作为查找对象 如果找不到就认为没有图片 提示用户上传图片
      var album_default = '847657516'
      // if (!albumFile && !$("#previewImg").attr("src").indexOf("fileName") > -1 || $("#previewImg").attr("src").indexOf(album_default) > -1) {
      //   alert('上传图片不能为空');
      //   return false;
      // }
      // else if (!$("#infoList").val()) {
      //   alert('上传内容不能为空');
      //   return false;
      // }

      // 未防治网络请求原因 点击保存时禁用按钮 防止多次提交表单
      $("#saveClubForm").attr("disabled", true);
      $("#saveClubForm").text("保存中...");


      var obgjParams = {};

      // 通过jq的extend实现赋值
      // clubDesc: $("#infoList").val(),
      $.extend(obgjParams, { name: $("#name").val(), hobby: $("#hobby").val(), address: $("#address").val(), livesong: $('#livesong').val(), detailed: $('#detailed').val(), clubLogoUrl: this.clubLogoUrls });

      // 在这里我们和后台商量 图片如果是之前初始页面返回不是默认图片 只修改文字的话 传入对应的photoFlag值 表示图片是否修改
      // if ($("#previewImg").attr("src").indexOf("fileName") > -1) {
      //   $.extend(obgjParams, { photoFlag: 2 });
      // } else {
      //   $.extend(obgjParams, { photoFlag: 1 });
      // }


      // 在这里提交url 的地址是我随便写的 可改成实际需要的
      $("#actPostInfos").ajaxSubmit({
        type: 'post', // 提交方式 get/post
        url: 'http://localhost:3000/upload/star', // 需要提交的 url
        data: obgjParams,
        success: function (data) { // data 保存提交后返回的数据，一般为 json 数据
          //       console.log('保存后数据', data)
          // 此处可对 data 作相关处理
          if (data.retCode == "OK") {
            alert('正确的提示');
            $("#saveClubForm").attr("disabled", false)
            $("#saveClubForm").text("保存")
          } else {
            // alert('错误的提示');
          }
        }
      });
    })
  })

</script>